<template>
  <div class="_ehl_mavon_editor" id="div1"></div>
</template>
<script>
  import E from 'wangeditor'
  export default {
    props: {
      value: { type: String, default: () => '' },
      height: { type: Number, default: () => 300 },
      config: {
        type: Array,
        default: () => [
          'head',
          'bold',
          'fontSize',
          'fontName',
          'italic',
          'underline',
          'strikeThrough',
          'indent',
          'lineHeight',
          'foreColor',
          'backColor',
          // 'link',
          'list',
          'todo',
          'justify',
          'quote',
          'emoticon',
          // 'image',
          // 'video',
          'table',
          // 'code',
          'splitLine',
          'undo',
          'redo',
        ],
      },
    },
    data() {
      return {
        doc: this.value,
        editor: null,
      }
    },
    mounted() {
      let that = this
      this.editor = new E('#div1')
      this.editor.config.height = this.height - 42
      this.editor.config.menus = this.config
      this.editor.create()
      this.editor.txt.html(this.value)
      this.editor.config.onchange = function (newHtml) {
        console.log(newHtml)
        that.$emit('input', newHtml)
      }
    },
  }
</script>
